{% set page_name = "消息管理" %}
{% import "components/nothing.html" as nothing with context %}
{% import "components/paginator.html" as paginator with context %}
{% extends "manage_base.html" %}
{% block manage_content %}
<div class="section">
    <div class="section__header">
        <h1 class="section__title">{{ _('消息管理') }}</h1>
        <div class="section__tools">
        </div>
    </div>
    <div class="section__body no-padding">
        {% if not mdocs.length %}
        {{ nothing.render('没有消息！') }}
        {% else %}
            <div class="message-list">
                {%- for mdoc in mdocs -%}
                <div class="message-card">
                    <div class="message-header">
                        <span class="text-gray">{{ datetimeSpan(mdoc._id)|safe }}</span>
                        <div class="message-users">
                            <div class="message-user">
                                <span class="user-label">{{ _('发送者') }}：</span>
                                <a href="{{ url('消息管理',query={uid:mdoc.from}) }}">{{ user.render_inline(udict[mdoc.from],badge=false,inline=false) }}</a>
                            </div>
                            <div class="message-user">
                                <span class="user-label">{{ _('接收者') }}：</span>
                                <a href="{{ url('消息管理',query={uid:mdoc.to}) }}">{{ user.render_inline(udict[mdoc.to],badge=false,inline=false) }}</a>
                            </div>
                        </div>
                        <span class="message-flag">{{ _('状态') }}：{{ mdoc.flag }}</span>
                    </div>
                    <div class="messagepad__message__body"><pre>{{ mdoc.content }}</pre></div>
                    <form method="post">
                         <input type="hidden" name="id" value="{{ mdoc._id }}">
                         <div class="float-right">
                             <button name="operation" value="delete" type="submit" class="rounded button">
                                 <span class="icon icon-delete">{{ _('Delete') }}</span>
                             </button>
                         </div>
                    </form>
                </div>
                {%- endfor -%}
            </div>
            {{ paginator.render(page, upcount,add_qs=('uid=' + uid)) }}
        {% endif %}
    </div>
</div>
{% endblock %}
{% block script %}
<style>
/* 添加卡片式布局样式 */
.message-list {
    display: grid;
    gap: 1rem;
}

.message-card {
    background: var(--card-bg);
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    position: relative;
}

.message-header {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    margin-bottom: 1rem;
}

.message-users {
    display: flex;
    gap: 1.5rem;
    flex-grow: 1;
}

.message-user {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
</style>
{% endblock %}